<template>
    <div>
        <!-- <el-scrollbar height="80vh">
            <ul>
                <li v-for="g in goods" :key="g.goodsId">
                    <div class="big">
                        <div class="box">
                          <el-image :src=g.imageUrl class="img"></el-image>
                        </div>
                        <div class="text">
                            <div class="one">{{ g.goodsName }}</div>
                            <span class="hot">￥{{ g.goodsPrice }}</span><span class="num"> ★ 已有1234人购买</span>
                        </div>
                    </div>
                </li>
            </ul>
        </el-scrollbar> -->


         <!-- 展示食谱 -->
          <ul v-infinite-scroll="getScroll" infinite-scroll-distance="50" style="height: 90vh;">
            <li v-for="r in recipes" :key="r.id">
              
              <div class="big">
                <div class="box" @click="turnShow(r.id)">
                  <el-image :src="r.author.avatarUrl" class="img"></el-image>
                </div>
                <div class="text">

                  <div class="one" @click="turnShow(r.id)">{{ r.name }}</div>

                  <div class="author">
                    <el-link underline="never"><el-image :src="r.author.avatarUrl"
                        class="ReUserImg"></el-image>
                      <span class="nickname">{{ r.author.nickname }}</span></el-link><br>
                  </div>

                  <div class="icon">

                    <div class="smallIcon">
                      <!-- <iconify-icon icon="material-symbols:favorite-outline" class="red" @click="likeRecipe" /> -->
                      <iconify-icon icon="material-symbols:favorite-rounded" style="color: #fd040a" />
                      <span>{{ r.likeCount }}</span>
                    </div>

                    <div class="smallIcon">
                      <el-icon>
                        <ChatLineRound />
                      </el-icon>
                      <span>{{ r.commentCount }}</span>
                    </div>

                  </div>

                </div>

              </div>

            </li>
          </ul>
          <!-- </el-scrollbar> -->
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
import { reactive,ref,toRefs} from 'vue'
import axios from 'axios'
import { SortUp } from '@element-plus/icons-vue';
const router = useRouter()
let route = useRoute()
const userid = route.query.au
choseFood()
async function choseFood() {
    await axios({
        url: '/api/recipe/getRecipeListByUserId',
        params: {
            limit: 40,//默认拿四十个数据
            offset: 0,
            userId: userid,
        }
    }).then(res => {
      console.log(userid)
        Object.assign(recipes, res.data.data)
    })
}


// 展示食谱详细对象接口
interface author {
  avatarUrl: string
  id: number
  isAdmin: string
  nickname: string
}
interface recipe {
  author: author
  boardId: number
  collectCount: number
  commentCount: number
  coverImage: string
  difficulty: string
  id: number
  likeCount: number
  name: string
  servings: string
  userId: number
}
let recipes: recipe[] = reactive([])
let addTen: number = 10
// 当食谱滚动条展示到底时，自动执行函数getScroll(),从后端那新的数据增加新的食谱
const getScroll = () => {
   if(recipes.length<40){
  return
  }
  axios({
    url: '/api/recipe/getRecipeListByUserId',
    params: {
      limit: 40 + addTen,
      offset: 0,
      userId: userid,
    },
    headers: { 'Content-Type': 'application/json' }
  }).then(async res => {
    addTen = addTen + 10//加十是为了不断拿到新的数据
    recipes.length = 0//拿数据需要先将食谱数组置为空，在赋值
    Object.assign(recipes, res.data.data)
  })
}
// 跳转至食谱路由
function turnShow(id: number) {
  router.push({
    path: '/showrecipe',
    query: { recipeId: id }
  })
}

</script>

<style scoped>
/* ul {
  margin: 0;
  padding: 0;
}

ul li {
  display: inline-block;
  list-style: none;
}

.big {

  height: 270px;
  width: 180px;
  margin: auto;
  margin-top: 25px;
  margin-left: 20px;
  padding: 15px;
}

.box {
  height: 180px;
  width: 180px;
  position: relative;
}

img {
  height: 100%;
  width: 100%;
  border-radius: 15px;
}



.one {
  display: block;
  width: 180px;
  height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;

}

.hot {
  color: red;
  font-size: 14px;
}

.num {
  color: #ccc;
  font-size: 12px;
}
.img {
  text-align: center;
  height: 100%;
  width: 100%;
} */

ul {
  margin: 0;
  padding: 0;
}

ul li {
  display: inline-block;
  list-style: none;
}

.big {
  height: 320px;
  width: 220px;
  background-color: white;
  margin: 20px;
  padding: 16px;
  border-radius: 2vw;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.big:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.box {
  cursor: pointer;
  height: 200px;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.box:hover .img {
  transform: scale(1.05);
}



.one {
  width: 200px;
  height: 60px;
  cursor: pointer;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  text-overflow: ellipsis;
  word-break: break-all;

}

.one:hover {
  color: #FF8C42
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}

.ReUserImg {
  float: left;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #f0f0f0;
  margin-right: 6px;
}

.author {
  margin-bottom: 5px;
}

.author:hover .nickname {
  color: #FF8C42;
}

.nickname {
  width: 140px;
  margin-left: 5px;
  float: left;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon {
  position: relative;
  /* margin-right: 30px; */
  font-size: 13px;
}

.smallIcon {
  display: inline-block;
  width: 60px;
}
</style>